@keyframes fish {
  0% {
    transform: rotateX(45deg) rotateY(25deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(45deg) rotateY(25deg) rotateZ(-360deg);
  }
}

@keyframes two {
  0% {
    transform: rotateX(45deg) rotateY(-25deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(45deg) rotateY(-25deg) rotateZ(-360deg);
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

.content {
  padding: 100px 300px;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  // background-color: thistle;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(800px);

  .fish {
    width: 400px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    transform: perspective(800px);
    transform: rotateX(45deg) rotateY(25deg) ;
    animation: fish 2s linear infinite;

    >div:first-of-type {
      height: 50%;
      width: 50%;
      position: absolute;
      top: 0;
      left: 0;
      border-top-left-radius: 100%;
      background: radial-gradient(circle at 100% 50%, transparent 99px,rgba(red, 0.6) 0);

      &::after {
        content: '';
        display: block;
        width: 20px;
        height: 0;
        box-shadow: 0px 0px 5px yellow,
          0px 0px 10px yellow,
          0px 0px 10px #e9ec28,
          0px 0px 10px #dadd3f,
          0px 0px 10px #e9ec28;
        border: 1px solid #fff;
        position: absolute;
        top: 1px;
        left: 179px;
        transform: rotateY(-7deg) rotateX(10deg);
      }
    }

    >div:nth-of-type(2) {
      height: 50%;
      width: 50%;
      position: absolute;
      bottom: 0;
      left: 0;
      // background-color: turquoise;
      border-bottom-left-radius: 100%;
      background: radial-gradient(circle at 100% 50%, transparent 99px,rgba(red, 0.6) 0);
    }

    >div:nth-of-type(3) {
      height: 50%;
      width: 50%;
      position: absolute;
      bottom: 0;
      left: 101px;
      border-radius: 50%;
      // background-color: turquoise;
      background: radial-gradient(circle at 50% 50%, transparent 50px,rgba(red, 0.7) 0);
    }

    .point {
      height: 80px;
      width: 80px;
      position: absolute;
      z-index: 1;
      top: 60px;
      left: 159px;
      border-radius: 50%;
      background-color: rgba(red, 0.7);
      // animation: jump 2s linear 0.9s infinite;
    }
  }

  >.two {
    width: 400px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    transform: perspective(800px);
    transform: rotateX(45deg) rotateY(-25deg);
    animation: two 2s linear infinite;

    >div:first-of-type {
      height: 50%;
      width: 50%;
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom-right-radius: 100%;
      background: radial-gradient(circle at 0% 50%, transparent 99px, rgba(blue,.6) 0);

      &::after {
        content: '';
        display: block;
        width: 20px;
        height: 0;
        box-shadow: 0px 0px 5px greenyellow,
          0px 0px 10px rgb(150, 238, 35),
          0px 0px 10px #a6e432,
          0px 0px 10px #51eeba,
          0px 0px 10px #8ae062;
        border: 1px solid #fff;
        position: absolute;
        bottom: 1px;
        right: 179px;
        transform: rotateY(-5deg) rotateX(10deg);
      }
    }

    >div:nth-of-type(2) {
      height: 50%;
      width: 50%;
      position: absolute;
      top: 0;
      right: 0;
      border-top-right-radius: 100%;
      background: radial-gradient(circle at 0% 50%, transparent 99px,rgba(blue,.6) 0);
    }

    >div:nth-of-type(3) {
      height: 50%;
      width: 50%;
      position: absolute;
      top: 0;
      right: 101px;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, transparent 50px, rgba(blue,.7) 0);
    }

    .point1 {
      height: 80px;
      width: 80px;
      position: absolute;
      z-index: 1;
      bottom: 59px;
      left: 161px;
      border-radius: 50%;
      background-color: rgba(blue,.7);
      // animation: jump1 2s linear 0.9s infinite;
    }
  }
}